<template>
   <el-card style="width: 250px" class="top">
        <h4 class="line1">实验统计</h4>
        <div class="label">
          <div class="box"><i class="el-icon-view"></i></div>
          <div class="box2">
            <span class="text" style="font-size:14px">实验浏览量 <span class="num">{{visitNum}}</span></span>
          </div>
        </div>
        <div class="label2 top1">
          <div class="box3"><i class="el-icon-s-custom"></i></div>
          <div class="box4">
            <span class="text" style="font-size:14px">实验人数 <span class="num">{{experimentNum}}</span></span>
          </div>
        </div>
        <div class="label3 top1">
          <div class="box5"><i class="el-icon-s-custom"></i></div>
          <div class="box6">
            <span class="text" style="font-size:14px">评论人数 <span class="num">{{commentNum}}</span></span>
          </div>
        </div>
      </el-card>
</template>

<script>
import {getInfo,updateInfo} from '@/service/info'
export default {
    created(){
    getInfo().then(res=>{
      this.commentNum=res.data.commentNum
      this.experimentNum =res.data.experimentNum
      this.visitNum =res.data.visitNum
    })
    updateInfo()
  },
  data(){
    return{
      showMain:false,
      commentNum:"",
      experimentNum:"",
      visitNum:""
    }
  },
};
</script>

<style lang="less" scoped>
 .label {
      display: flex;

      .box {
        background-color: #21a6c2;
        width: 28px;
        text-align: center;
        border-radius: 5px;
        color: #fff;
        margin: 0 2px;
      }
      .box2 {
        display: flex;
        position: relative;
        width: 177px;
        padding: 0 10px;
        background-color: #21a6c2;
        color: #fff;
        border-radius: 3px;
        .num {
          position: absolute;
          right: 8px;
        }
      }
    }
    .label2 {
      display: flex;
      .box3 {
        background-color: #a621c2;
        width: 28px;
        text-align: center;
        border-radius: 5px;
        color: #fff;
        margin: 0 2px;
      }
      .box4 {
        display: flex;
        position: relative;
        width: 177px;
        padding: 0 10px;
        background-color: #a621c2;
        color: #fff;
        border-radius: 3px;
        .num {
          position: absolute;
          right: 8px;
        }
      }
    }
    .label3 {
      display: flex;
      .box5 {
        background-color: #4976e8;
        width: 28px;
        text-align: center;
        border-radius: 5px;
        color: #fff;
        margin: 0 2px;
      }
      .box6 {
        display: flex;
        position: relative;
        width: 177px;
        padding: 0 10px;
        background-color: #4976e8;
        color: #fff;
        border-radius: 3px;
        .num {
          position: absolute;
          right: 8px;
        }
      }
    }
</style>